<!DOCTYPE html>
<html>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1">
	<head>
		<title>demo</title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<link rel="stylesheet" type="text/css" href="css/form.css" />
	<body>
		<div class="_bg">

		</div>
		<div class="_cont" id="app">
			<div class="_logo">
				<img
					src="https://www.jotform.com/uploads/createrystore/form_files/Createry-Store.609d88967fbbb7.20281852.png">
			</div>
			<!-- 顶部描述 -->
			<div class="_head">
				<div class="_left">
					<img src="http://shots.jotform.com/elton/images/send_files_logo.png" alt="" width="80"
						class="header-logo-left">
				</div>
				<div class="_right">
					<div class="_t1">
						Send us your Pictures!
					</div>
					<div class="_t2">
						If you need your pictures to come out in certain order, please number them before submitting.
						(NOTE: if you have more than one order, please submit them separately. Thank you!)
					</div>
				</div>
			</div>
			<!-- 中部form表单 -->
			<div class="_form">
				<div class="_item _validate form-line _isrequired">
					<div class="_label">卡头选择 <div class="_require">*</div>
					</div>
					<div class="_list_cont">
						<div class="_img_list" v-for="(item ,index) in ActiveImgList" :key="index"
							@click="isActiveImg=index" :class="[isActiveImg==index?'_isActiveImg':'']">
							<img :src="item.url">
						</div>
					</div>

				</div>
				<div class="_item _validate form-line _isrequired" v-show="isActiveImg=='7'" validate="formData_card_t1">
					<div class="_label">卡头文案 <div class="_require">*</div>
					</div>
					<div class="_inp">
						<textarea id="input_8" class="form-textarea"  cols="35" rows="5"
							v-model="formData.card_t1" data-component="textarea" aria-labelledby="label_8"></textarea>
					</div>
				</div>
				<div class="_item _validate form-line" validate="formData_card_t2" validate="formData_card_t2">
					<div class="_label">片尾文案</div>
					<div class="_inp">
						<textarea id="input_8" class="form-textarea"  cols="35" rows="5"
							v-model="formData.card_t2" data-component="textarea" aria-labelledby="label_8"></textarea>
					</div>
				</div>
				<div class="_item _validate form-line _isrequired" validate="formData_img_num">
					<div class="_label">制作份数 <div class="_require">*</div>
					</div>
					<div class="_inp">
						<input type="text" v-model="formData.img_num" >
					</div>
					<div class="_desc">
						如果制作多个一模一样的的胶卷，请输入数量，如果内容不一样，请重新再次上传信息

					</div>
				</div>
				<div class="_item _validate form-line _isrequired" validate="formData_orider">
					<div class="_label">订单号 <div class="_require">*</div>
					</div>
					<div class="_inp">
						<input type="text" v-model="formData.orider" >
					</div>
				</div>
				<div class="_item _validate form-line _isrequired" validate="formData_name">
					<div class="_label">收件人名称 <div class="_require">*</div>
					</div>
					<div class="_inp">
						<input type="text" v-model="formData.name" >
					</div>
				</div>
				<div class="_item _validate form-line _isrequired" validate="formData_ipone">
					<div class="_label">收件人手机号 <div class="_require">*</div>
					</div>
					<div class="_inp">
						<input type="text" v-model="formData.ipone" >
					</div>
				</div>
				<div class="_item _validate form-line _isrequired" validate="formData_email">
					<div class="_label">邮箱 <div class="_require">*</div>
					</div>
					<div class="_inp">
						<input type="text"  v-model="formData.email">
					</div>
				</div>
				<div class="_item _validate form-line _isrequired" validate="formData_common">
					<div class="_label">备注 <div class="_require">*</div>
					</div>
					<div class="_inp">
						<textarea id="input_8" v-model="formData.common" class="form-textarea" 
							cols="35" rows="5" data-component="textarea" aria-labelledby="label_8" placeholder="备注个性化需求，要告诉我的事项，选填
"></textarea>
					</div>
				</div>


			</div>


			<!-- 上传 -->
			<div class="_upload">
				<div class="_item _validate _isrequired">
					<div class="_label">上传数量 <div class="_require">*</div>

						<div class="_selected">
							<select name="formData_file_num" v-model="formData.file_num">
								<option value="15">15张</option>
								<option value="30">30张</option>
							</select>
							<div class="_desc"> 尽量选择清晰的图片</div>
						</div>
					</div>
					<div class="_label">Upload your pictures here</div>
					<div class="_btn">
						Click to Upload
					</div>
					<input v-model="file" class="_upload_input" accept="" type="file" validate="" @change="selectImg($event)"
					v-model="file" />
					<div class="_desc">
						File Types: zip, rar, jpg, jpeg, png, heic (Compressed .ZIP/.RAR file is preferred, but if not
						is
						okay, thank you!)
					</div>
					
					<div class="_cont_file_list" >
						<div class="_list" v-for="(item,index) in filesList" :key='index'>
							<div class="_name">{{item.name}}</div>
							<div class="_close" @click="colseImg(index)">
								删除
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 上传步骤图 -->
			<div class="_upload_desc">
				
				<img
					src="https://www.jotform.com/uploads/createrystore/form_files/Asset%206@2x.5fc96c5792b251.58081379.png">
			</div>
			<!-- 多行文本 -->
			<div class="_form">
				<div class="_item _validate form-line" validate="formData_common">
					<div class="_label">备注</div>
					<div class="_inp">
						<textarea id="input_8" v-model="formData.common" class="form-textarea" 
							cols="35" rows="5" data-component="textarea" aria-labelledby="label_8"></textarea>
					</div>
				</div>
			</div>

			<div class="_foot">

				<div class="_desc">
					<div class="_t1">Thank you!</div>
					<div class="_t2">We will contact you if there is any issues with your pictures. Your order will be
						processed and shipped within 3-5 business days (Holidays Season: 4-10 business days). Our ETA is
						about 7-20 business days for most countries. Please feel free to contact us on Etsy or Instagram
						(@createrystore).</div>
				</div>

			</div>
			<div class="_submit">
				<div class="_btn" @click="submitForm()">SUBMIT</div>
			</div>

		</div>

		<!-- <form method="post" οnsubmit="return verification()">
			<input name="name" id='name' type='text' placeholder='姓名(必填)' />
			<input name="content" id='content' type='text' placeholder='内容(必填)' />
			<input type='submit' value='提交' />
		</form> -->

		<script>
			// 判断是否为移动端运行环境 

			if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (
					/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/
					.test(navigator.userAgent))) {

				if (window.location.href.indexOf("?mobile") < 0) {

					try {

						if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {

							// 判断访问环境是 Android|webOS|iPhone|iPod|BlackBerry 则加载以下样式 

							setActiveStyleSheet("css/index_m.css");

						} else if (/iPad/i.test(navigator.userAgent)) {

							// 判断访问环境是 iPad 则加载以下样式 

							setActiveStyleSheet("css/index_m.css");

						} else {

							// 判断访问环境是 其他移动设备 则加载以下样式 

							setActiveStyleSheet("css/index_m.css");

						}

					} catch (e) {}

				}

			} else {

				// 如果以上都不是，则加载以下样式 

				// setActiveStyleSheet("style_mobile_no.css");

			}

			// 判断完毕后加载样式 

			function setActiveStyleSheet(filename) {
				// document.write("＜link href=" + filename + " rel=stylesheet＞");
				document.write(`<link rel="stylesheet" type="text/css" href="${filename}" />`)
			}
		</script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->

		<script type="text/javascript" src="js/index.js"></script>
	</body>

</html>
